<template>
  <div>
    <div class="editTop">
      <el-button
        icon="el-icon-back"
        circle
        @click="closeEditModal"
        type="primary"
      ></el-button>
      <span>{{ isEdit ? "编辑" : "新建" }}活动活动</span>
    </div>
    <el-form
      label-position="right"
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="活动标题" prop="name">
        <el-input
          v-model="form.name"
          style="max-width: 480px"
          maxlength="128"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="活动概述" prop="summary">
        <el-input
          v-model="form.summary"
          type="textarea"
          maxlength="120"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="form.author" style="width: 180px"></el-input>
      </el-form-item>
      <el-divider class="divider divideTop"></el-divider>

      <el-form-item label="活动类型" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择活动类别">
          <el-option
            v-for="item in articleTypeList"
            :key="item.uuid"
            :label="item.name"
            :value="item.uuid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="直播链接" prop="liveUrl">
        <el-input v-model="form.liveUrl" style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="报名链接" prop="applyUrl">
        <el-input v-model="form.applyUrl" style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item label="活动时间" prop="beginDate">
        <el-date-picker
          v-model="form.beginDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="form.location" style="width: 280px"></el-input>
      </el-form-item>
      <el-divider class="divider divideTop"></el-divider>

      <el-form-item
        label="封面图"
        prop="coverUrl"
        
      >
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('coverUrl')"
        >
          <img v-if="form.coverUrl" :src="form.coverUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('coverUrl')" :url="form.coverUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片建议分辨率为16:9的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-form-item label="活动二维码" prop="qrCodeUrl">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('qrCodeUrl')"
        >
          <img v-if="form.qrCodeUrl" :src="form.qrCodeUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('qrCodeUrl')" :url="form.qrCodeUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片建议分辨率为1:1的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-divider class="divider divideTop"></el-divider>
      <el-form-item label="活动标签" prop="tagsIds">
        <el-select v-model="form.tagsIds" filterable multiple placeholder="请选择活动标签">
          <el-option
            v-for="item in biaoqianList"
            :key="item.uuid"
            :label="item.name"
            :value="item.uuid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" prop="publishDate">
        <el-date-picker
          v-model="form.publishDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="其他展示位置" prop="formDisplay">
        <el-checkbox-group v-model="form.formDisplay">
          <el-checkbox
            style="margin-bottom:5px"
            v-for="item in displayStatus"
            :label="item.key"
            :key="item.key"
            >{{ item.value }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="首页小banner图" prop="smallUrl" v-if="isSmallUrl">
        <!-- <el-upload
          style="position: relative;top: 10px;height: 120px;"
          :show-file-list="false"
          class="avatar-uploader"
          :action="uploadUrl()"
          accept="image/jpeg,image/jpg,image/png，image/webp"
          list-type="picture-card"
          :data="uploadData"
          :on-success="handleAvatarSuccess('smallUrl')"
        >
          <img v-if="form.smallUrl" :src="form.smallUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <uploadCropper :handleAvatarSuccess="handleAvatarSuccess('smallUrl')" :url="form.smallUrl"/>
        <el-alert
          style="margin-top: 50px"
          show-icon
          title="图片比最佳分辨率为180px：180px的整数倍。"
          type="info"
        >
        </el-alert>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="活动正文" prop="content">
        <div id="demo1"></div>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="closeEditModal">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getUploadToken, uploadUrl } from "@/util/upload";
import { displayStatus } from "@/config/article";
import wangEditor from "wangeditor";
import rules from "@/config/rules";
import {editMixin} from '../../mixins'

export default {
  props: ["originForm", "isEdit", "closeEditModal", "articleTypeList"],
  mixins: [editMixin],
  data() {
    return {
      displayStatus,
      editor: null,
      // 上传相关
      uploadData: {  },
      uploadUrl,
      form: {},
      rules
    };
  },
  methods: {
    handleSubmit() {
      const { originForm, form, isEdit } = this;
      const ajaxType = isEdit ? "put" : "post";
      const url = isEdit
        ? `/api/articles/${originForm.uuid}.json?_method=put`
        : "/api/articles.json";
      this.form.display = form.formDisplay.join(",");
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios[ajaxType](url, this.form).then((response) => {
            this.$message.success("提交成功");
            this.closeEditModal();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.form = this.originForm;
    this.form.formDisplay = this.originForm.display.split(",");
    console.log(111, this.form);
    this.getBiaoqianList()
  },
  mounted() {
    const { originForm, isEdit } = this;
    const url = `/api/articles/${originForm.uuid}.json`
    if (isEdit) {
      this.$axios.get(url).then((response) => {
        this.form.tagsIds = response.article.tags.map(item => item.uuid)
        this.form.content = response.article.content
        this.createEditor(response.article)
      });
    } else {
      this.createEditor(originForm)
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
    this.form = {};
  },
};
</script>
<style lang="scss" scoped>
.editTop {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  margin-left: 20px;
  button {
    margin-right: 10px;
  }
}
.footer {
  display: flex;
  justify-content: center;
}
.divideTop {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
}
</style>
